﻿define(function (require) {
    var ContactView = require('views/contact.view');
    var ContactListView = require('views/contactlist.view');
    var GroupView = require('views/group.view');
    var GroupListView = require('views/grouplist.view');

    require('models/contact');
    require('models/contactlist');
    require('models/group');
    require('models/grouplist');

    return Backbone.View.extend({
        tagName: "div",
        template: _.template($("#contact-container").html()),
        events: {
            "click .btn-person": "changeToPerson",
            "click .btn-group": "changeToGroup",
            "click .action-button": "finishChoose",
            "click .right-button": "writeMesaage",
        },
        contactView: null,
        groupView: null,
        members: null,
        
        render: function () {
            $(this.el).html(this.template({}));
            this.renderPerson();
            this.renderGroup();
            
            return this;
        },
        renderPerson: function () {
            this.contactView = new ContactListView({ model: new ContactList() });
            $(this.el).find('.content-primary-person').append(this.contactView.el);
        },
        renderGroup: function () {
            this.groupView = new GroupListView({ model: new GroupList() });
            $(this.el).find('.content-primary-group').append(this.groupView.el);
        },
        initialize: function () {
            _.bindAll(this, 'render','initForWriteMessage','finishChoose');
            EventProxy.bind(EventProxy.Events.chooseReceiver, this.initForWriteMessage);
        },
        writeMesaage: function () {
            EventProxy.trigger(EventProxy.Events.writeMessage);
        },
        changeToPerson: function (e) {
            $('.content-primary-group').hide();
            $('.content-primary-person').show();
        },
        changeToGroup: function (e) {
            $('.content-primary-group').show();
            $('.content-primary-person').hide();
        },
        resetModels: function(){
            var _self = this;
            _self.contactView.resetModels();
            _self.groupView.resetModels();
            
        },
        setMembers:function(){
            var _self = this;
            _self.members = {
                persons: _self.contactView.getPersons(),
                groups: _self.groupView.getGroups()
            }  
        },
        finishChoose: function(){
            var _self = this;
           
            _self.setMembers();
            _self.resetModels();

            EventProxy.trigger(EventProxy.Events.finishChoose, _self.members);
            
            this.resetForFinishChoose();
        },
        resetForFinishChoose:function(){
            //控制页面元素的显示
            var $contact =  $('#contact-page');
            var $icon = $contact.find('.ui-icon');
            var $actionbutton = $contact.find('.action-button');
            var $writebutton = $contact.find('.right-button');

            $contact.addClass('_page');
            $icon.data('Ischecked', false)
                    .data('Isready', false)
                    .hide();
                
            $actionbutton.hide();
            $writebutton.show();
        },
        initForWriteMessage: function(){
            var $contact =  $('#contact-page');
            var $icon = $contact.find('.ui-icon');
            var $actionbutton = $contact.find('.action-button');
            var $writebutton = $contact.find('.right-button');

            $contact.removeClass('_page');
            $icon.data('Ischecked', false)
                    .data('Isready', true)
                    .hide();
                
            $actionbutton.show();
            $writebutton.hide();
        }
    });
});